// src/components/XtxSteps.tsx
import type { FunctionalComponent } from "vue";
import styles from "./XtxSteps.module.less";
interface Props{
    active: number;
}
export const XtxSteps: FunctionalComponent<Props> = (props, context) => {
       //获取默认插槽数据
       const content  = context.slots.default?.()
       //用于存储虚拟节点的容器
       const target:any[] = [];
       //遍历插槽虚拟节点
       content?.forEach((item)=>{
        if(typeof item.type ==='symbol'){
            //当前节点是通过v-for生成的不可以直接使用
            if(item.children instanceof Array){
                target.push(...item.children)
            }
        }else{
            target.push(item)
        }
       });
       
       //渲染视图
       return (
        <div class={styles["xtx-steps"]}>
        {target.map((item,index)=>(
            <div class={`${styles['xtx-steps-item']} ${
                index  +1 <= props.active ? styles.active : ""
            }`}>
                <div class={styles["step"]}>
                    <span>{index + 1}</span>
                </div>
                <div class={styles["title"]}>{item.props.title}</div>
                <div class={styles["desc"]}>{item.props.desc}</div>
            </div>
        ))}
      </div>
       )
}       